<template>
  <div>
    <el-dialog title="添加商品规格" :visible.sync="obj.isshow">
      <el-form :model="form">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格属性" :label-width="formLabelWidth" v-for="(item,ind) in specsAttrArr" :key="ind">
          <div class="addline">
           <el-input v-model="item.attrs" autocomplete="off"></el-input>
           <el-button v-if="ind==0" type="primary" @click="addspecsattr">新增规格属性</el-button>
           <el-button @click="delcurattr(ind)" v-else type="danger" size="mini">删除</el-button>
           </div>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            :active-value=1
            :inactive-value=2
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="obj.isshow=false">取 消</el-button>
        <el-button type="primary" @click="addspecs">添加</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addOneGoodsSpecs } from "../../../request/api.js";

export default {
    props:['obj'],
    data(){
      return{
        specsAttrArr:[{attrs:''}],//所有规格属性值
        form: {
          specsname: '',  //规格名称 
          status:1,//状态 1为正常 2为禁用
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      //添加商品规格：
      addspecs(){
       
        let arr = [];
        for(let objs of this.specsAttrArr){
             arr.push(objs.attrs)
        }
         this.form.attrs = arr.join();
         
         addOneGoodsSpecs(this.form).then(d=>{
          console.log(d,'dddd');
         }).catch(e=>{

         })
      },
      //删除某一个用户可以输入的规格属性:
      delcurattr(n){
         this.specsAttrArr.splice(n,1);
      },
      //新增用户可以输入的规格属性:
      addspecsattr(){
         let obj = {attrs:''};
         this.specsAttrArr.push(obj);
      }
    }  
};
</script>

<style scoped>
.addline{
  display: flex;
}
</style>